import React, { useCallback, useEffect, useState } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Tabs, Col, Image, Pagination, Input } from 'antd';
import { Routes, Route, Navigate, useNavigate, } from "react-router-dom";
import request, { baseUrl } from "../utils/request";
import './class/yangshi.scss'
import '../views/home/First.css'
import { item, time, toubu, diqu1 } from './class/saixuan'
import Tab from './class/contxts/index'
const { Search } = Input

function Class({ tages }) {
    // console.log(tages);
    const navigate = useNavigate()
    const [params, setParams] = useState({
        page: 1,
        size: 40
    })
    const [tag, setTag] = useState(tages)
    const [data, setData] = useState([])
    const [data2, setdata2] = useState(item())
    const [time1, setTime] = useState(time())
    const [diqu3, setdiqu3] = useState(diqu1())
    const [toubu2, settoubu] = useState(toubu())
    const [tag2, settag2] = useState('')
    const [tag3, settag3] = useState('')


    useEffect(() => {
        getdata()
    }, [tag, tag2, tag3])

    const onChange2 = (key) => {
        console.log('key', key)
        if (key == '首页') {
            navigate('/home')
            return
        }

        setTag(key)
        // navigate(key)
    };

    const onChangeDiqu = (key) => {
        if (key == '全部地区') {
            settag2('')
            return
        }
        settag2(key)

    }
    const onChangeTime = (key) => {
        console.log(key);
        if (key == '全部时间') {
            settag3('')
        }
        settag3(key)
    }
    function getdata() {
        if (tag2 == '') {
            let tag1 = tag || '动作'
            request.get(`/list/show/category/${tag1}`, {
                params
            }).then(res => {
                const { data } = res
                // console.log('data', data.movielist.data)
                setData(data.movielist.data)

            })
        } else if (tag3 == '') {
            console.log(tag3);
            request.get(`/list/show/category/${tag}/address/${tag2}`, {
                params
            }).then(res => {
                const { data } = res
                // console.log('data', data.movielist.data)
                setData(data.movielist.data)

            })
        } else {
            request.get(`/list/show/category/${tag}/address/${tag2}/startTime/${tag3}`, {
                params
            }).then(res => {
                const { data } = res
                // console.log('data', data.movielist.data)
                setData(data.movielist.data)

            })
        }
    }


    const change = (page, size) => {
        setParams({
            page,
            size
        })
        request.get(`/list/show/category/${tag}`, {
            params
        }).then(res => {
            const { data } = res
            // console.log('data',data.movielist.data)
            setData(data.movielist.data)
        })

    }

    const nuber2 = 20
    const onSearch = (e) => {
        // console.log(e);
        request({
            url: '/list/search/?kw=' + e
        }).then(res => {
            // console.log(res.data.movielist.data);
            setData(res.data.movielist.data)
        })
    }
    return (
        <div className="App">
            <div className="beijing"> </div>
            {/* 导航栏*/}
            <nav className="navbar navbar-inverse navbar-fixed-top">
                <Search className='ssk' placeholder="搜索你喜欢的影片、演员、导演" enterButton onSearch={onSearch}
                    style={{
                        width: '530px',
                    }}
                />
                <div className="navbar-text ">
                    <Tab shuzhu={toubu2.toubu} centered2='false' tabBarGutter2={nuber2} onChange2={onChange2} />
                    <span className="span-1">|</span>
                    <span onClick={() => {
                        navigate('/user/index/information')
                    }} className="glyphicon glyphicon-user span-2"></span>
                </div>
            </nav>

            {/*筛选*/}
            <div className="box">
                <Tab shuzhu={data2.item} centered2='ture' size2='large' onChange2={onChange2} />
                <Tab onChange2={onChangeDiqu} shuzhu={diqu3.diqu1} />
                <Tab onChange2={onChangeTime} shuzhu={time1.time} />
            </div>

            <Row gutter={16}>
                {
                    data.map(item => {
                        return <Col className="gutter-row" span={4} key={item.movieID}>
                            <img onClick={() => {
                                navigate('/detail/?movieID=' + item.movieID)
                            }} src={baseUrl + '/imgs/' + item.imgNames} width="90%" height={'280px'} />
                            <div className='abc'>{item.title}</div>

                        </Col>
                    })
                }

            </Row>

            <Pagination
                showQuickJumper
                total={500}
                onChange={change}
            />



        </div>

    )
}

export default Class